<template>
  <section>
      <el-row :gutter="20">
        <el-col :span="16">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="选择商品：">
                    <el-button type="primary" size="mini" @click="select()">选择</el-button>
                    <span style="margin-left:12px;" v-if="productDetail">{{ productDetail.title }}</span>
                </el-form-item>
                <el-form-item label="选择规格：" v-if="productDetail&&productDetail.hasSku==1">
                    <div style="width:100%;height:300px;overflow:auto;">
                        <table id="product-attribute-table" class="ikd-input-table ik-table-layout-fixed">
                            <thead>
                            <tr>
                                <th nowrap></th>
                                <th nowrap>规格名</th>
                                <th nowrap>规格值</th>
                                <th nowrap>图片</th>
                                <th nowrap>选择</th>
                            </tr>
                            </thead>
                            <tbody>
                                <template v-for="(item, idx) in productDetail.skuInfo">
                                    <tr :key="item.id">
                                        <td nowrap>
                                            {{ idx+1 }}
                                        </td>
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.value }}</td>
                                        <td><pic-view v-model="item.imgUrl"></pic-view></td>
                                        <td>
                                             <el-radio v-model="form.skuId" :label="item.id">选择</el-radio>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>

                    </div>
                </el-form-item>
                <el-form-item label="下单数量：" prop="quantity">
                    <el-input type="number" size="mini" class="w100"  v-model="form.quantity" placeholder="" />
                </el-form-item>
                <el-form-item label="收件人：" prop="name">
                    <el-input size="mini" style="width:200px;" v-model="form.name" placeholder="请输入收件人" />
                </el-form-item>
                <el-form-item label="联系电话：" prop="mobile">
                    <el-input size="mini" style="width:200px;" v-model="form.mobile" placeholder="请输入联系电话" />
                </el-form-item>
                <el-form-item label="所在地区：" prop="area">
                    <area-select v-model="form.area" />
                </el-form-item>
                <el-form-item label="详细地址：" prop="address">
                    <el-input size="mini" v-model="form.address" placeholder="请输入详细地址" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="next()" :loading="saveLoading">确定添加</el-button>
                </el-form-item>
            </el-form>
        </el-col>
      </el-row>

        <el-dialog title="选择商品" :visible.sync="dialogSelectVisible" :close-on-click-modal="false" width="900px">
            <product-list :formData.sync="createForm" @okSelect="onSelect" />
        </el-dialog>
  </section>
</template>

<script>
    import {
        order_create
    } from '../../api/order';
    import {
        product_detail
    } from '../../api/product';
    export default {
        components: {
            'area-select': () => import('../../components/AreaSelect/index'),
            'pic-view': () => import('../../components/PicView/index'),
            'product-list': () => import('../../components/Product/list'),
        },
    data() {
        return {
            productDetail: {},
            dialogSelectVisible: false,
            createForm: {
                isSelect: true
            },
            form: {
                productId: 0,
                skuId: undefined,
                quantity: undefined,
                name: undefined,
                mobile: undefined,
                area: undefined,
                address: undefined,
            },
            saveLoading: false,
            rules: {
                quantity: [
                    {
                        required: true,
                        message: '请输入下单数量',
                        trigger: 'blur'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '请输入收件人',
                        trigger: 'blur'
                    },
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    },
                ],
                area: [
                    {
                        required: true,
                        message: '请选择联系地址',
                        trigger: 'blur'
                    },
                ],
                address: [
                    {
                        required: true,
                        message: '请输入详细地址',
                        trigger: 'blur'
                    },
                ]
            }
        }
    },
    mounted() {
    },
    methods: {
        select() {
            this.dialogSelectVisible = true;
        },
        next() {
            const set = this.$refs;
            set["form"].validate(valid => {
                if (valid) {
                    if(!this.form.productId) {
                        this.$message.error("请选择下单商品");
                    } else {
                        if(this.productDetail.hasSku == "1") {
                            if(!this.form.skuId) {
                                this.$message.error("请选择规格");
                                return;
                            }
                        }

                        this.saveLoading = true;
                        order_create(this.form).then((res)=>{
                            this.saveLoading = false;
                            this.$message.success("订单创建成功");

                            this.$router.push("/order_all");
                        }).catch((err)=>{
                            this.saveLoading = false;
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        onSelect(item) {
            this.form.productId = item.id;
            this.form.skuId = undefined;
            this.dialogSelectVisible = false;

            this.getDetail();
        },
        getDetail() {
            product_detail(this.form.productId).then(response => {
                let form = response.data;
                this.productDetail = form;
            }).catch(()=>{
            });
        }
    }
    };
</script>
